<div id="siteSignin">
	<div id="siteSigninPanel">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">×</button>
			<h3 id="myModalLabel">
				<g:message code="auth.login.signin" />
			</h3>
		</div>
		<div class="modal-body">
			<g:formRemote name="siteSigninForm" update="siteSignin"
				url="[controller: 'user', action: 'siteSignin']"
				before="showLoadingImageSignin();">

				<div class="form-horizontal">
					<g:if test="${flash.message}">
						<div id="signinErrors" class="alert alert-error">
							<a class="close" data-dismiss="alert">×</a>
							${flash.message}
						</div>
					</g:if>

					<g:hasErrors bean="${user}">
						<g:eachError bean="${user}" var="error">
							<div id="signinErrors" class="alert alert-error">
								<a class="close" data-dismiss="alert">×</a>
								<g:message error="${error}" />
							</div>
						</g:eachError>
					</g:hasErrors>

					<div
						class="control-group ${hasErrors(bean: user, field: 'username', 'error')}">
						<label class="control-label" for="inputUserName"><g:message
								code="auth.login.username" /></label>
						<div class="controls">
							<g:field id="inputUserName" class="input-large" type="text"
								name="username" value="${user?.username}"
								placeholder="${message(code: 'auth.login.username')}" />
						</div>
					</div>

					<div
						class="control-group ${hasErrors(bean: user, field: 'password', 'error')}">
						<label class="control-label" for="inputPassword"><g:message
								code="auth.login.credentials.password" /></label>
						<div class="controls">
							<g:field id="inputPassword" class="input-large" type="password"
								name="password" value="${user?.password}"
								placeholder="${message(code: 'auth.login.credentials.password')}" />
						</div>
					</div>

					<div
						class="control-group ${hasErrors(bean: user, field: 'password', 'error')}">
						<label class="control-label" for="inputConfirmPassword"><g:message
								code="auth.login.credentials.password.confirm" /></label>
						<div class="controls">
							<g:field id="inputConfirmPassword" class="input-large"
								type="password" name="confirmPassword"
								value="${user?.confirmPassword}"
								placeholder="${message(code: 'auth.login.credentials.password')}" />
						</div>
					</div>

					<div
						class="control-group ${hasErrors(bean: user, field: 'email', 'error')}">
						<label class="control-label" for="inputEmail"><g:message
								code="auth.login.email" /></label>
						<div class="controls">
							<g:field id="inputEmail" class="input-large" type="text"
								name="email" value="${user?.email}"
								placeholder="${message(code: 'auth.login.email')}" />
						</div>
					</div>

					<div
						class="control-group ${hasErrors(bean: user, field: 'captchaCode', 'error')}">
						<img class="control-label"
							src="${createLink(controller: 'simpleCaptcha', action: 'captcha')}"></img>

						<div class="controls">
							<g:field id="captchaCode" class="input-large" type="text"
								value="${user?.captchaCode}" name="captchaCode"
								placeholder="${message(code: 'user.captcha')}" />
						</div>
					</div>
				</div>

			</g:formRemote>
		</div>

		<div class="cleaner"></div>

		<div class="modal-footer">
			<button class="btn btn" form="siteSigninForm">
				<g:message code="auth.login.new.user.create" />
			</button>
			<img id="loadingImageSignin" class="loadingImageSignin"
				src="${resource(dir:'images', file: 'ajax-loader.gif') }"
				alt="image"></img>
		</div>
	</div>

	<script type="text/javascript">
		$(document).ready(function() {
			$("#loadingImageSignin").hide();
		});

		function showLoadingImageSignin() {
			$("#loadingImageSignin").fadeIn();
		}
	</script>
</div>